<template>
<div class="projects-card">
    <no-data v-if="!cardData.rows.length" :types="cardData.isSearch">
        <!-- <span>暂无数据</span> -->
    </no-data>
    <el-card class="card-item" shadow="hover" v-for="(item, i) in cardData.rows" :key="i">
        <i class="title-icon"></i>
        <div slot="header" class="card-img-box">
            <span class="card-title">
                <span>{{item.projectName}}</span>
                <!-- <span class="subtitle">({{item.mtitle}})</span> -->
            </span>
        </div>
        <div class="card-item-con">
            <el-form>
                <el-form-item label="项目代码:">
                    {{item.projectCode}}
                </el-form-item>
                <el-form-item label="负责人:">
                    {{item.ownerUserName}} {{item.email}}
                </el-form-item>
                <el-form-item label="描述:">
                    <el-tooltip effect="dark" :content="item.description" placement="top-start">
                        <span>{{item.description}}</span>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="实验:">
                    {{item.experimentTotal || 0}}
                </el-form-item>
                <el-form-item label="表数量:">
                    {{item.tableTotal || 0}}
                </el-form-item>
                <el-form-item label="创建时间:">
                    {{item.createTime}}
                </el-form-item>
            </el-form>
        </div>
        <div class="card-item-foot">
            <el-button @click="handleToSet(item)">项目设置</el-button>
            <el-button @click="handleToExp(item.projectId)">进入机器学习</el-button>
        </div>
    </el-card>
</div>
</template>

<script>
import NoData from '@/components/NoData'
export default {
    name: 'ProjectsCard',
    components: { NoData },
    props: {
        cardData: {
            require: true,
            type: Object
        }
    },
    methods: {
        handleToExp (id) {
            localStorage.setItem('projectId', id)
            localStorage.setItem('showOps', '0')
            window.open(`${location.origin}/exp/index.html`)
        },
        handleToSet (scope) {
            this.$router.push(`/projectSet/${scope.projectId}`)
            localStorage.setItem('currentProjectName', scope.projectName)
        }
    }
}
</script>

<style lang="less">
.projects-card {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    padding: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    .el-card {
        position: relative;
        width: calc(33% - 10px);
        border: 1px solid #D9D9D9;
        margin-bottom: 16px;
        color: #333333;
        font-family: 'PingFangSC-Regular';
        &:hover {
            box-shadow: 0 8px 8px 3px rgba(0, 0, 0, .5);
            transform-style: preserve-3d;
            transform: perspective(900px) rotateX(5deg);
        }
        &:nth-child(3n+2) {
            margin-left: 16px;
            margin-right: 16px;
        }
        .title-icon {
            width: 20px;
            height: 20px;
            background: url('../../../assets/img/card-icon.png') no-repeat;
            background-size: contain;
            position: absolute;
            top: 16px;
        }
        .el-card__header {
            padding: 16px;
            padding-bottom: 4px;
            border-bottom: 0;
            .card-img-box {
                .card-title {
                    padding-left: 32px;
                    &:first-child {
                        font-family: 'PingFangSC-Medium';
                    }
                    .subtitle {
                        margin-left: 3px;
                        color: rgba(51, 51, 51, .65);
                    }
                }
            }
        }
        .el-card__body {
            padding: 16px;
            .card-item-con {
                padding-left: 32px;
                .el-form {
                    display: flex;
                    flex-direction: column;
                    .el-form-item__label {
                        color: rgba(51, 51, 51, .65);
                    }
                    .el-form-item__content, .el-form-item__label {
                        font-size: 12px;
                        line-height: inherit;
                    }
                    .el-tooltip {
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            .card-item-foot {
                margin-top: 24px;
                display: flex;
                justify-content: space-around;
                .el-button {
                    width: 50%;
                    font-size: 14px;
                    &:hover {
                        color: #2680EB;
                    }
                }
            }
        }
    }
}
</style>
